<!--
 * @Author: 17607638761 2856491026@qq.com
 * @Date: 2023-05-18 10:28:12
 * @LastEditors: 17607638761 2856491026@qq.com
 * @LastEditTime: 2023-05-18 10:51:26
 * @FilePath: \bpm-ui\src\views\middle-platform\unit-ability-overview\as-template.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AElabs
-->
<template>
	<div class="container">
		<div class="as-template-title">
			<svg-icon icon-class="cc-dot" style="margin-right: 10px; font-size: 16px"></svg-icon>
			<span>{{ title }}</span>
		</div>
		<div class="as-template-data">
			<span v-for="item in data" :key="item.value" style="margin-right: 20px">
				{{ item.label }}: <span class="value">{{ item.value }}</span>
			</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import { watch } from 'fs';
import { onMounted } from 'vue';
interface Data {
	label: string;
	value: number;
}
interface Props {
	title: string;
	data: Data[];
}
const props = withDefaults(defineProps<Props>(), {
	title: '',
	data: () => [],
});
</script>

<style scoped lang="scss">
@import '@/styles/variables.module.scss';
.container {
	height: 100%;
	width: 100%;
	background: rgba(28, 43, 93, 0.47);
	border: 2px solid $--color-cyan;
	box-shadow: 0px 5px 7px 1px rgba(34, 52, 101, 0.1);
	display: flex;
	align-items: center;
	padding: 12px;
	font-size: 18px;
	.as-template-title {
		color: #fff;
		margin-right: 28px;
		font-weight: 500;
		.svg-icon {
			vertical-align: bottom;
		}
	}
	.as-template-data {
		.value {
			color: $--color-cyan;
		}
	}
}
</style>
